<template>
  <div class="page-export-container">
    <AResult :status="state.status" :title="state.title">
      <template v-if="state.status === 'info'" #icon>
        <LoadingOutlined />
      </template>
      <template #extra>
        <AButton @click="$router.back(-1)">返回</AButton>
        <AButton v-show="state.status === 'success'" type="primary" @click="onDownload">下载文件</AButton>
      </template>
    </AResult>
  </div>
</template>

<script setup>
import { LoadingOutlined } from '@ant-design/icons-vue';
import { useState } from '@/hooks';
import { fetchExportCheck } from '@/api/login';
import { onBeforeMount } from 'vue';

const props = defineProps({
  taskId: [Number, String]
});

const statusInfo = {
  LOAD: { status: 'info', title: '加载中，请稍后...' },
  NOT_EXIST: { status: 'warning', title: '请先导出数据！' },
  LOADING: { status: 'info', title: '正在导出数据，请稍后...' },
  SUCCESS: { status: 'success', title: '导出成功' },
  ERROR: { status: 'error', title: '导出失败，请联系管理员' }
};

const [state, setState] = useState(statusInfo.NOT_EXIST);

const onStart = (taskId) => {
  setState(statusInfo.LOAD);
  const timer = setInterval(async () => {
    const res = await fetchExportCheck(taskId);
    setState(statusInfo[res]);
    if (res !== 'LOADING') {
      clearInterval(timer);
    }
  }, 1000);
};

onBeforeMount(() => {
  props.taskId && onStart(props.taskId);
});

const onDownload = () => {
  // const res = 'data:application/octet-stream;charset=utf-8,';
  // const url = URL.createObjectURL(res); // 创建一个URL指向该Blob对象
  // const link = document.createElement('a');
  // link.href = url;
  // link.download = `${new Date().getTime() + '用户列表'}.xlsx`;
  // document.body.appendChild(link);
  // link.click();
  // document.body.removeChild(link);
  // URL.revokeObjectURL(url); // 释放URL对象
};
</script>

<style lang="scss" scoped></style>
